<template>
  <view class="container">
    <!-- 收货地址组件 -->
    <MyAddress></MyAddress>
    <!-- 空车显示 -->
    <view class="empty_car_box" v-if="shoppCart.length === 0">
      <uni-icons type="cart" size="260rpx" color="#999"></uni-icons>
      <view class="empty_car">您的购物车还没有商品哟!</view>
      <view class="go_shopp" @class="goShopp">马上去添加</view>
    </view>
    <!-- 商品 -->
    <view
      class="goods_item"
      :key="item.goods_id"
      v-for="(item, index) in shoppCart">
      <radio
        color="#dd444c"
        style="transform: scale(0.7)"
        :checked="item.state == 1"
        @click="goodsStateChange(item)"></radio>
      <view class="img_box">
        <image
          class="img"
          mode="aspectFill"
          :src="`${baseUrl}/images/audi/library/${item.images_kv}`"></image>
      </view>
      <view class="content_box">
        <view class="title">{{ item.shop_title }}</view>
        <view class="server">{{
          item.service == 1 ? '包邮' : item.service == 2 ? '不包邮' : '到店领取'
        }}</view>
        <view class="price_box">
          <view class="present"
            >￥<text class="price">{{ item.price | moneyShow }}</text></view
          >
          <u-number-box
            integer
            buttonSize="40rpx"
            bgColor="#fff"
            :value="item.num"
            v-if="index === itemIndex"
            @change="valChange($event, item.goods_id)"></u-number-box>
          <view v-else class="num" @click="clickNum(index)"
            >x{{ item.num }}</view
          >
        </view>
      </view>
    </view>
    <view class="bom_box" v-if="shoppCart.length > 0">
      <label @click="checkboxChange">
        <radio
          label="全选"
          color="#dd444c"
          :checked="allGoodState"
          style="transform: scale(0.7)"></radio>
        全选</label
      >
      <view class="money_box">
        应付金额:
        <text class="num">￥{{ allGoodsprice }}</text>
      </view>
      <view class="btn" @click="submit">立即支付</view>
    </view>
    <!-- 政策组件 -->
    <RulesCompany ref="rule"></RulesCompany>
    <view class="radio_box">
      <u-checkbox-group>
        <u-checkbox activeColor="#de4141" @change="change"> </u-checkbox>
      </u-checkbox-group>
      <view>
        我已阅读、理解并同意此<text @click="openRules" class="policy"
          >《隐私政策》</text
        >。</view
      >
    </view>
    <!-- 登录组件 -->
    <UserLoginModal ref="openLogin"></UserLoginModal>
  </view>
</template>

<script>
import _ from 'lodash'
import { goodsDetailApi } from '@/API/Shop'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'ShoppCart',
  components: {},
  data() {
    return {
      checkedVal: false,
      itemIndex: -1,
      currIndex: 1,
      checkboxValue1: false,
      baseUrl: this.$baseUrl,
    }
  },
  computed: {
    ...mapState(['shoppCart', 'loginInfo', 'address','brandInfo']),
    // 选中的商品价格
    allGoodsprice() {
      let shoppCart = this.shoppCart
      if (shoppCart.length == 0) return 0.0
      let total = 0
      for (let index = 0; index < shoppCart.length; index++) {
        if (shoppCart[index].state === 1) {
          total = total + Number(shoppCart[index].price) * shoppCart[index].num
        }
      }
      return total
    },
    allGoodState() {
      let shoppCart = this.shoppCart
      if (shoppCart.length == 0) return false
      return shoppCart.every(item => item.state == 1)
    },
  },
  methods: {
    async getGoodsDetail(id) {
      const { data: res } = await goodsDetailApi({ id })
      this.goodsDetail = res.data
      if (res.data.images_library !== '') {
        let temp = res.data.images_library.split(';')
        this.goodsImgList = temp.map((item, index) => ({
          id: index + 1,
          src: `${this.baseUrl}/images/audi/library/${item}`,
        }))
      }
    },
    // 去商店
    goShopp() {
      uni.navigateTo({
        url: `/pages/Shop/ShopAdmin`,
      })
    },
    // 支付
    submit() {
      if (Object.keys(this.address).length == 0) {
        return uni.$showMsg('请先选择收货地址！')
      }
      if (!this.checkedVal) {
        return uni.$showMsg('请阅读并同意勾选协议')
      }
      let deepValue = _.cloneDeep(this.shoppCart)
      deepValue = deepValue.filter(item => item.state == 1)
      console.log(deepValue)
    },
    onClickTab(i) {
      this.currIndex = i
    },
    clickNum(i) {
      this.itemIndex = i
    },
    // 调用子组件方法
    openRules() {
      this.$refs.rule.openRul()
    },
    change(e) {
      this.checkedVal = e
    },
    // 更改商品数量
    valChange(e, id) {
      this.changeGoodsNub({ num: e.value, goods_id: id })
    },
    // 全选
    checkboxChange() {
      let flag = this.allGoodState ? 0 : 1
      this.updateAllGoodsState(flag)
    },
    goodsStateChange(e) {
      let { goods_id, state } = e
      this.updateGoodsState({ state, goods_id })
    },
    ...mapMutations([
      'saveCarModelDataList',
      'changeGoodsState',
      'changeGoodsNub', //更改购物车商品数量
      'updateGoodsState',
      'updateAllGoodsState',
    ]),
  },
  onLoad(options) {
    // 是否登录
    if (Object.keys(this.loginInfo).length === 0) {
      this.$refs.openLogin.isShow()
      return false
    }
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {
    // uni.showTabBar()
  },
  onPageScroll() {
    this.itemIndex = -1
  },
}
</script>

<style scoped lang="scss">
@import '@/styles/mixins.scss';
.container {
  height: 100%;
  background-color: #f8f9f8;
  position: relative;

  .card {
    width: 95%;
    padding: 10px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 15rpx;
    box-shadow: $theme-shadow;
  }
  .goods_item {
    display: flex;
    margin: 20rpx auto;
    border-radius: 15rpx;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    .img_box {
      width: 120rpx;
      height: 120rpx;
      border-radius: 15rpx;
      overflow: hidden;
      flex-shrink: 0;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .content_box {
      width: 500rpx;
      // margin-left: 20rpx;
      // border: 1px solid black;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
      .title {
        width: 100%;
        font-size: 30rpx;
        color: #222;
        font-weight: bold;
        @include text-ellipsis();
      }
      .server {
        text-align: center;
        font-size: 24rpx;
        padding: 0rpx 6rpx;
        border-radius: 6rpx;
        color: $theme-color;
        background-color: #f1f1f1;
      }
      .price_box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .present {
          color: $theme-color;
          font-size: 24rpx;
          .price {
            font-weight: bold;
            font-size: 30rpx;
          }
        }
        .num {
          margin-right: 20rpx;
          font-size: 24rpx;
        }
      }
    }
  }
  // 空车
  .empty_car_box {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    .empty_car {
      font-size: 32rpx;
    }
    .go_shopp {
      line-height: 66rpx;
      font-size: 32rpx;
      color: $theme-color;
      font-weight: bold;
    }
  }
  .bom_box {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20rpx 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    .money_box {
      font-size: 24rpx;
      color: #666;
      .num {
        font-size: 36rpx;
        color: $theme-color;
        font-weight: bold;
      }
    }
    .btn {
      width: 220rpx;
      line-height: 80rpx;
      text-align: center;
      background-color: $theme-color;
      border-radius: 8rpx;
      color: #f8f9f8;
    }
  }
}
// 隐私政策
.radio_box {
  margin-bottom: 30rpx;
  margin-top: 30rpx;
  // text-align: center;
  display: flex;
  justify-content: center;

  .policy {
    color: $theme-color;
  }
}
</style>
